
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Timeline, Icon, Row, Col } from 'antd';
import { WeaProgress, WeaSteps, WeaRightMenu } from "ecCom";
const Step = WeaSteps.Step;
import ActualBillGroup from "./ActualBillGroup";
import './style/index.css';

@inject('actualBillStore')
@observer
export default class ActualBill extends React.Component {
	constructor(props){
		super(props);
		this.state = {
            
        }
	}

	componentWillMount(){
		const {setPayType} = this.props.actualBillStore;
		const {payType} = this.props;
		setPayType(payType);
	}

	componentDidMount() {
        const {init,setPayType} = this.props.actualBillStore;
        const {refId} = this.props;
		init(refId);
		
    }
    
    componentWillReceiveProps(nextProps) {
        const {init,setPayType} = this.props.actualBillStore;
        const {refId,payType} = nextProps;
        if (this.props.refId !== nextProps.refId||this.props.payType !== nextProps.payType) {
			setPayType(payType);
			init(refId);
        }
    }

	componentWillUnmount(){
		const {componentWillUnmount} = this.props.actualBillStore;
		componentWillUnmount();
	}
	
	render() {
		const store = this.props.actualBillStore
		const {bills,payType,total,payTypeName} = store;
		return (
			// <WeaRightMenu datas={store.rightMeus}>
				<div style={{height:"100%",padding:"15px 24px"}}>
					{bills.length>0?<div>
						<Timeline>
						{
							bills.map((item)=>{
								return (<ActualBillGroup item={item} />)
							})
						}	
						</Timeline>
						<div style={{float:'left',width:'100%',color:'red',fontWeight:"700",height:"50px",lineHeight:"50px",verticalAlign:"middle"}}>
							<Row>
								<Col span={2}></Col>
								<Col span={2}><span>合计：</span></Col>
								<Col span={2}><span>￥{total.payTotal}</span></Col>
								<Col span={2}><span>{payTypeName}款比例：</span></Col>
								<Col span={6}><WeaProgress percent={total.proportion||0} strokeColor={(total.proportion||0)>=100?"#52c41a":"red"} strokeWidth={12} status={(total.proportion||0)>=100?"success":"active"} /></Col>
								<Col span={10}></Col>
							</Row>
						</div>
					</div>
					:<div style={{textAlign:'center',color:'#ccc'}}>暂无数据</div>
					}
				</div>
			// </WeaRightMenu>
		)

	}


	// getRightMenu = ()=>{
	// 	const {canAdd,modeInfo,refId} = this.props.actualBillStore;
	// 	const fieldId = typeof(modeInfo.cons_name)=='string'?modeInfo.cons_name.substring(modeInfo.cons_name.indexOf('_')+1,modeInfo.cons_name.length):'';
	// 	return canAdd?[{
	// 		icon: <i className={"icon-coms-New-Flow"} />,
	// 		content: "新建",
	// 		key: '1',
	// 		onClick: key => window.openFullWindowHaveBar(`#/main/cube/card?type=1&modeId=${modeInfo.modeId}&formId=${modeInfo.formId}&field${fieldId}=${refId}`),
	// 	}]:[]
	// }
}